<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    <script>

        //定义一个名为button-counter的新组件
        Vue.component('button-counter',{
            data:function () {
                return {
                    count: 10
                }
            },

            template:'<button v-on:click="count++">You clicked me {{count}} times.</button>'
        })

        new Vue({el: '#components-demo'})

    </script>

</body>
</html>